<template>
    <div class="main">
        <el-form :model="dynamicValidateForm" class="demo-dynamic" label-width="120px" ref="dynamicValidateForm">
            <el-form-item :rules="[
			{ required: true, message: '真实姓名不能为空', trigger: 'blur' },
			
			]" label="真实姓名" prop="name">
                <el-input v-model="dynamicValidateForm.name" style="width: 200px;">
                </el-input>
            </el-form-item>
            <el-form-item :rules="[
		{ required: true, message: '身份证号码不能为空', trigger: 'blur' },
		
		]" label="身份证号码" prop="number">
                <el-input v-model="dynamicValidateForm.number" style="width: 200px;">
                </el-input>
            </el-form-item>
            <el-form-item :rules="[
	{ required: true, message: '身份证正面照不能为空', trigger: 'blur' },
	
	]" label="身份证正面照" prop="photo">
                <el-upload :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" class="avatar-uploader">
                    <img :src="imageUrl" class="avatar" v-if="imageUrl">
                        <i class="el-icon-plus avatar-uploader-icon" v-else="">
                        </i>
                    </img>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button @click="submitForm('dynamicValidateForm')" type="primary">
                    提交审核
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				imageUrl: '',
				dynamicValidateForm: {
					domains: [{
						value: ''
					}],
					name: '',
					number:'',
				}
			};
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			removeDomain(item) {
				var index = this.dynamicValidateForm.domains.indexOf(item)
				if (index !== -1) {
					this.dynamicValidateForm.domains.splice(index, 1)
				}
			},
			addDomain() {
				this.dynamicValidateForm.domains.push({
					value: '',
					key: Date.now()
				});
			}
		}
	}
</script>
<style>
.main{
	width: 22%;
	margin: 0 auto;
	/*border:1px solid #000;*/
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>